@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot');
    src:  url('../fonts/icomoon.eot') format('embedded-opentype'),
      url('../fonts/icomoon.ttf') format('truetype'),
      url('../fonts/icomoon.woff') format('woff'),
      url('../fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
    li,
    ul,
    div,
    html,
    body {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%
    }

    li {
      list-style-type: none
    }

    .wrap {
      height: 100%;
      overflow: hidden;
      perspective: 800px;
      /* 元素距视图的距离 */
    }

    #box {
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      position: relative;
      transform-style: preserve-3d;
      transform: translateZ(-1600px);
      z-index: 1;
    }

    #box li {
      top: -80px;
      left: -60px;
      width: 120px;
      height: 160px;
      position: absolute;
      text-align: center;
      line-height: 160px;
      background-color: rgba(5, 100, 80, 0.2);
      border: 1px solid rgba(163, 78, 202, 0.25);
      box-shadow: 0 0 15px rgba(163, 78, 202, 0.5);
      cursor: pointer;
      
    }

    #box li::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg,#03a8f409,#ff00592c);
      /* background-color:rgba(0,0,0,0.1); */
    }
    #box li::after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg,#03a8f409,#ff005931);
      /* background-color:rgba(0,0,0,0.1); */

      filter:blur(30px)
    }

    #box li span {
      font-size: 28px;
      font-weight: blod;
      text-shadow: 2px 2px 5px black;
      color: #efebef;

      position: absolute;
      top: 6px;
      left: 6px;
      bottom: 6px;
      right: 6px;
      background-color: rgba(0, 0, 0, 0.1);
      z-index: 2;
    }

    .mask {
      width: 100%;
      height: 100%;
      background: url('bg1.jpg') no-repeat center;
      background-size: cover;
      filter: blur(5px);
    }

    .mask>.bg-mask {
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.25;
    }

    
    /* .grid{
      
      
      position: fixed;
      top: 0;
      left: 0;
    }
    .helix{
      
      
      position: fixed;
      top: 0;
      left: 40px;
    }
    .sphere{
      
     
      position: fixed;
      top: 0;
      left: 80px;
    }
    .hurricane{
      
      
      position: fixed;
      top: 0;
      left: 120px;
    } */
    .search{
      display: flex;
      display: -webkit-flex;

      position: fixed;
      right: 50px;
      top: 20px;
      width: 200px;
      height: 25px;
      border:1px solid #000;
    }
    .search input{
      width: 0;
      display: flex;
      display: -webkit-flex;
      flex: 9;
      background-color: rgba(163, 78, 202, 0.2);
      border: none;
      outline: none;
    }
    .search button{
      line-height: 25px;
      font-size: 18px;
      display: flex;
      display: -webkit-flex;
      flex:1;
      border: none;
      border-left: 1px solid black;
      background-color: rgba(163, 78, 202, 0.2);
    }
    .search button::after{
        font-family: 'icomoon';
        content: "\e986";
        
    }
 